<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- STYLESHEETS -->
		<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
   	<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
		<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
		<link rel="stylesheet" type="text/css" href="../../css/responsive.css">
		<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
	    <!-- file-input -->
	    <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />
		<!-- SELECT2 -->
	<link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
		<!-- datatable -->
		<link rel="stylesheet" href="../../js/datatables/datatable.css">
		 <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
	<!-- JQUERY -->
		<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
		<script src="../../js/common.js"></script>
<style type="text/css">
/* 左侧添加图文区域start */
.article-content{
    width: 320px;
}
.article-content .article-content-header{
    padding: 15px;
    background-color: #fff;
    
    border: 1px solid #ccc;
}
.article-content .header-img-container{
     position: relative;
    height: 200px;
    width: 100%;
      overflow: hidden;
    background-color: tan;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.article-content p,.article-list .article-item .delete{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #00000067;
}
.article-list{
    border: 3px solid green;
}
.article-list .article-item{
   /*  padding: 15px; */
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    border-bottom: 1px solid green;
width: 310px;
margin-left: -38px;
}
.article-list .article-item .item-img-container{
    width: 60px;
    height: 60px;
       background-color: yellow;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
}
.article-list .article-item h3{
    font-size: 12px;
}
.article-list .article-item .delete{
    width: 30px;
    float:right;
    margin-left:240px;
    right: 0;
   /*  bottom: -60px; */
    line-height: 30px;
    font-size: 12px;
   /*  padding: 0 10px; */
     display: -webkit-box; 
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.article-list .article-item:hover .delete{
    bottom: 0px;
    transition: all .3s;
}
.article-list .delete span{
    cursor: pointer;
}
.article-content .add-article{
    height: 150px;
    font-size: 20px;
    font-weight: 20;
   display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 2px dashed #ccc;
    border-top: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
}
/* 左侧添加图文区域end */
</style>

	</head>

	<body>
		<header class="navbar clearfix" id="header">
		</header>

		<!-- PAGE -->
		<section id="page">
			<!-- SIDEBAR -->
			<div id="sidebar" class="sidebar">
				<div class="sidebar-menu nav-collapse">

					<!-- SIDEBAR MENU -->
					<ul>
						
					</ul>
					<!-- /SIDEBAR MENU -->
				</div>

			</div>
			<!-- /SIDEBAR -->
			<div id="main-content">

				<div class="container">
					<div class="row">
						<div id="content" class="col-lg-12">
							<!-- PAGE HEADER-->
							<div class="row">
								<div class="col-sm-12">
									<div class="page-header">
										<!-- STYLER -->

										<!-- /STYLER -->
										<!-- BREADCRUMBS -->
										<ul class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a href="index.html">首页</a>
											</li>
											<li>
												<a href="#">商品管理</a>
											</li>
											<li>维护商品</li>
										</ul>
										<!-- /BREADCRUMBS -->

									</div>
								</div>
							</div>
							<!-- /PAGE HEADER -->
							<!-- SAMPLE -->
							
							<div class="row col-md-12">

														
								<div class="form-group" style="display:inline-flex;height:auto">									
									<div class="article-content">
								                    <div class="article-content-header divContent">
								                        <div class="header-img-container">
								                            <img src="" alt="">
								                            <p class="title">请输入标题</p>
								                        </div>
			                        
						                   			 </div>
								                    <ul class="article-list">
								                        
								                    </ul>
								                    <div class="add-article">
								                        +
								                    </div>
               							 </div>
               							 <div class="editContent" style="display:none">
               							 <div class="row" style="width:600px">               							
	               							<label class="control-label col-md-2">标题：</label>
											<div class="col-md-7" style="text-align: left;display: inline-flex;width:400px">
												<input type="text" class="form-control"  name="msgTitle" placeHolder="标题描述" >										
											
											</div>
										  </div>
										   <div class="row" style="width:600px">        
											<label class="control-label col-md-2">图片：</label>
											
											<form>
													<div class="col-md-7">									
				                                      	<div hidden-image></div>
												          	<div class="fileinput fileinput-new" data-provides="fileinput" >
													          	
																<div style="float:left; margin-left:5px; " class="addnewimg" id="f_span">
																	<span class="btn btn-default btn-file" id="fir">
																		<span class="fileinput-new" id="two" >上传图片</span>		
																		<span class="fileinput-exists">Change</span>												
																			<input type="file" name="uploadFile" upload-file="imageUrlProduct">
																	</span>
																	<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style=" margin-bottom: 0px;margin-top:10px;">
																	<div class="progress-bar progress-bar-success" style="width:0%;"></div>
																    </div>	
																</div>
																
															</div>
																						 								
																					
													</div>
											</form>	
											</div>
											 <div class="row" style="width:600px">   
											<label class="control-label col-md-2"><span class="required"></span>跳转链接：</label>
											<div class="col-md-7" style="text-align: left;display: inline-flex;width:400px">
												<input type="text" class="form-control"  name="msgLinkUrl" placeHolder="跳转链接" >										
											
											</div>
					                       </div>
               							 <div>               							 
											 
								
               							
               							 </div>
								</div>
									
									</div>	
												
							
								
									
									
									
										<div class="box ">
										<label>日期：</label>
										<div  style="color: red;">
										<form id="form_date">										
									    	 <input type="text" name="startDate"  class="form-control bootstrap-datepicker" style="width: 200px;"> <span>公众号推号日最好不要设置</span>
									   </form>
									</div>
									   	<label>测试发送人手机号：</label>
									   	<input type="text" name="userName" class="form-control" style="width: 200px;"/>
											<a href="javascript:;" type="test"  class="btn btn-success bt-test" style="width: 100px;margin-top:20px;">
												保存
											</a>
										</div>
									
					   
							<!-- /SAMPLE -->

							<div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
							</div>
						
						<!-- /CONTENT-->
					</div>
				</div>
			</div>
		</section>
		<!--/PAGE -->
		<!-- JAVASCRIPTS -->
		<!-- Placed at the end of the document so the pages load faster -->

		<!-- JQUERY UI-->
		<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
		<!-- BOOTSTRAP -->
		<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

		<!-- BLOCK UI -->
		<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
		
		<!-- AUTOSIZE -->
		<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
	
		<!-- INPUT MASK -->
		<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
		<!-- SELECT2 -->
		<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
	   
	     <!-- bootstrap-fileupload -->
	    <script type="text/javascript" src="../../js/jquery-upload/js/jquery.iframe-transport.js"></script>
	    <script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload.min.js"></script>
	    <script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-process.min.js"></script> 
	    <script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-validate.min.js"></script>
	    
		<!-- UNIFORM -->
		<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
		<!-- spinner -->
		<script src="../../js/spinner/spin.js"></script>
		<!-- DATA TABLES -->
		<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
		<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

		<!--bootbox-->
		<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
		<!-- COOKIE -->
		<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
		<!-- CUSTOM SCRIPT -->
		<script src="../../js/script.js"></script>
		<script src="../../js/common.js"></script>
		<script>
		
		var weixin=function(){
			var valiFrom=$("#form_weixin");
			 
			var formValiInit=function(rules){
	            valiFrom.validate({
	                doNotHideMessage: true,
					errorClass: 'error-span wd',
	                errorElement: 'span',
	                rules: {
	                	msgTitle:{required:true},
	                	msgImagePath:{required:true},
	                	msgLinkUrl:{required:true},
	                	sendDate:{required:true}	                
	                },
	                highlight: function (element) { 
	                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
	                },
	
	                unhighlight: function (element) { 
	                    $(element).closest('.form-group').removeClass('has-error'); 
	                },	
	                success: function (label) {
	                   label.addClass('valid').closest('.form-group').removeClass('has-error').addClass('has-success'); 
	                    }
	               
				 });
			};
			
	      
			
			var save=function(){
				var list=[];
				$(".divContent").each(function(){
					var p={}
					p.msgType="News";
					p.msgTitle=$(this).find(".title").text();
					p.msgLinkUrl=$(this).attr("linkurl");					
					p.msgImagePath=$(this).find("img").attr("src");
					p.sendDate=$("[name=startDate]").val();					
					list.push(p);
				});
				var userName = $("[name=userName]").val();
				$.confirm("确认数据填写正确?",function(){
					 $.ajax({
							type: "post",
							url: App.getContextPath()+"admin/weixincustom/saveWeixinMessage.do",
							async: true,
							data: {
								weixinMessage:JSON.stringify(list), 
								userName:userName
							},
							success: function(result) {
								if (result.type == 'success') {
									window.location.href='second_weixin_list.html';
								}
								$.alert(result.content);
						     }
						   });
				});
				
			}
			var fileUpLoad=function(){	  
         		$(".progress").hide();       	
				$("[upload-file=imageUrlProduct]").fileupload({
					url: App.getContextPath()+"admin/file/uploadImage.do",
					formData: {fileType: "FocusImage"},
					dataType: 'json',
					acceptFileTypes: /(\.|\/)(gif|jpe?g|png|JPG?g)$/i,
					iframe: true,
				    start:function(e) {		    	
				    	$('.progress').fadeIn(300);					    	
				    	return true;
			    		},
					autoUpload: true,
					done: function(e, data) {
						var result = data.result;	
						if(result.message!=""){
							$.alert(result.message);							
							return false;
						}else{
																
				    	var $tr = $(this).closest("form");
				    	 $(".curr").find("img").attr("src",result.fileUrl);
				    		
						}
					},						
				    progressall: function (e, data) {					    	
			            var progress = parseInt(data.loaded / data.total * 100, 10);
			            $('.progress .progress-bar').css('width',progress + '%');
			        }
				}).on('fileuploaddone',function(e,data) {
						$(".progress").fadeOut(300);
				
				});
			
         	};

	         var getCustomMessage=function(day){
	         	var url=url=App.getContextPath()+"admin/weixincustom/findCustomMessageByDay.do?day="+day;
	         	$.ajax({
					type: "get",
					url: url,
					async: true,
					success: function(result) {
						var msgArray = result.extra;
						for (var i = 0; i < msgArray.length; i++) {
							if (i == 0) {
								$(".article-content-header").find("img").attr('src', msgArray[i].msgImagePath);
								$(".article-content-header .title").html(msgArray[i].msgTitle);
								$(".article-content-header").attr('linkurl', msgArray[i].msgLinkUrl);
							} else {
								var li="<li class='article-item divContent' linkurl='"+msgArray[i].msgLinkUrl+"'><h3 class='title'>"+msgArray[i].msgTitle+"</h3><div class='item-img-container'>"+
				        		 "<img src='"+msgArray[i].msgImagePath+"' alt=''> </div> <div class='delete'> <span>删除</span></div></li>"; 
				        		 $(".article-list").append(li);
							}
						}
						$("[name=startDate]").val(day);
					}
				}); 
	         };
	         return {	         
		         init:function(){
		        	 $.initDate($("#form_date"),0,0);	
		        	 var flag = $.getUrlParam('flag');
		        	 if (flag == 'edit') {
		        		 var day = $.getUrlParam('day');
		        		 getCustomMessage(day);
		        	 }
		        	 var obj=null;
		        	 $(".article-content").on('click', '.divContent', function(){
		        		 $(".divContent").removeClass("curr")
		        		 $(".editContent").show();
		        		 var title = $(this).find('.title').text();
		        		 if (title == '标题') title = '';
	        			 $("[name=msgTitle]").val(title);
	        			 $("[name=msgLinkUrl]").val($(this).attr('linkurl'));
		        		 $(this).addClass("curr");
		        		 fileUpLoad();
		        	 });
		        	 $(".article-content").on('click', '.delete', function(){
		        		 $(this).parents("li").remove();
		        	 });
		        	 $(".add-article").click(function(){
		        		 var li="<li class='article-item divContent'><h3 class='title'>标题</h3><div class='item-img-container'>"+
		        		 "<img src='' alt=''> </div> <div class='delete'> <span>删除</span></div></li>";                                 
		        		 $(".article-list").append(li);
		        	 });
		        	 $("[name=msgTitle]").keydown(function(){
		        		 $(".curr").find(".title").html($(this).val())
		        	 })
		        	 $("[name=msgTitle]").blur(function(){
		        		 $(".curr").find(".title").html($(this).val())
		        	 })
		        	 $("[name=msgLinkUrl]").keydown(function(){
		        		 $(".curr").attr("linkurl",$(this).val());
		        	 })
		        	 $("[name=msgLinkUrl]").blur(function(){
		        		 $(".curr").attr("linkurl",$(this).val());
		        	 })
		        	 
		        	 $(".bt-test").click(save);
					
		          }
	         }
		    
	      }();
	      
	      $(function(){
	      	$("#header").load("../head.html");
	        App.init(); //Initialise plugins and elements	        
	        weixin.init();
	      	
	      });
		</script>
	

		<!-- /JAVASCRIPTS -->
	</body>

</html>